{% extends "q3demotube/baseq3.html" %}

{% block page_title %}Edit start and end Time{% endblock %}
{% block content %}
<form action="/q3demotube/edit_time/{{ video.id }}/" method="POST">
 Start: {{ timeForm.start }} End {{ timeForm.end }}
 <input type="Submit" value="Submit">
</form>

<p>
 <b>Double click progress bar to set Start, click to set End!</b> <br/>
 <b>Max video length = 30 sec</b>
</p>



{% if video.has_images %}
    <div id="imgContainer">
	   <img src="{{ MEDIA_URL }}q3/images/{{ video.id }}.jpg" alt="140 images to be precise!" />
    </div>

    <div id="navcontainer">
    <ul id="navlist">
    {% for time, i in images %}
        <li onmouseover="$('#imgContainer img').animate({ left: -440 * {{ i }} }, 2)" id="{{ i }}" onclick="$('input#id_end').val('{{ time }}')" ondblclick="$('input#id_start, #time').val('{{ time }}')">

		<!-- $('img#theImage').attr('src', '{{ MEDIA_URL }}q3/images/{{ demo_id }}-images/{{ video.id }}.{{ i }}.jpg') -->
        {% ifequal videoTime time %}
            <b>||</b>
        {% endifequal  %}
        </li>
    {% endfor %}
    </ul>
    </div>
{% endif %}
{% endblock %}


